<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>选择车辆</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#1A66FA"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="order_date ">
				<view class="flex align-center justify-between" style="margin-bottom: 30rpx;">
					<view class="store_name" v-if="storeName">{{storeName}}</view>
					<view class="store_name" v-else>中出行</view>
					<view class="store_ch flex align-center justify-center" @tap.stop="storeShow=true">
						<image :src='STATIC_URL+"437.png"' mode="aspectFill"></image>
						<text>切换</text>
					</view>
				</view>
				<view class="flex align-center justify-between" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/selectVehicle/selectTime`">
					<view class="date_item">
						<view class="date_item_1">{{timeData.toDay_time}} {{timeData.week}}</view>
						<view class="date_item_2">{{timeData.toDay_month}}</view>
					</view>
					<view class="date_ce">
						<image class="date_ce_1" :src='STATIC_URL+"467.png"' mode="aspectFill"></image>
						<view class="date_ce_2">
							<text v-if="timeData.dayNum > 0">{{timeData.dayNum}}天</text>
							<text v-if="timeData.dayHours > 0">{{timeData.dayHours}}小时</text>
						</view>
					</view>
					<view class="date_item" style="text-align: right;">
						<view class="date_item_1">{{timeData.twoDay_time}} {{timeData.twoWeek}}</view>
						<view class="date_item_2">{{timeData.twoDay_month}}</view>
					</view>
				</view>
			</view>
			<view class="search_view flex align-center justify-between">
				<view class="search_input flex align-center">
					<image :src='STATIC_URL+"451.png"' mode="aspectFill"></image>
					<input v-model="keyword" class="input" type="text" placeholder="输入车牌号或车型" placeholder-style="font-size:30rpx;color:#999;" @confirm="getSearch">
				</view>
			</view>
			
			<view class="car_list">
				<view class="car_item" v-for="(item, index) in list" :key="index" @tap.stop="confirmCar(item.status, item.store_id, item.id, item.real_car_id)">
					<view class="car_top flex align-center">
						<view class="top_le">
							<view class="card_no">
								<view class="card_no_text flex align-center">
									<view>{{item.car_number}}</view>
									<view v-if="item.type == 2" class="car_tag_1 flex align-center justify-center">新能源</view>
									<view class="car_tag_2 flex align-center justify-center">{{item.model}}</view>
								</view>
							</view>
							<view class="label_list">
								<view class="label_item flex align-center justify-center">{{item.brand_name}}</view>
								
								<view class="battery_info flex align-center justify-center" v-if="item.type == 2 && item.car_oil">
									<image :src='STATIC_URL+"15.png"'></image>
									<text>{{item.car_oil}}%</text>
								</view>
							</view>
						</view>
						<view class="top_ri">
							<u-lazy-load height="146" border-radius="16" class="car_img" :image="item.image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
						</view>
					</view>
					<view class="car_ce">{{item.name}}</view>
					<view class="car_btm flex align-center justify-between">
						<view class="btm_le flex align-center">
							<view class="btm_le_item flex align-center">
								<view class="btm_le_item_week flex align-center justify-center">价格</view>
								<view class="btm_le_item_price">
									<text class="btm_le_item_price_1">￥</text>
									<text>{{Number(item.price)}}</text>
								</view>
							</view>
							<!-- <view class="btm_le_item flex align-center" style="margin-left: 16rpx;">
								<view class="btm_le_item_week_ot flex align-center justify-center">周末</view>
								<view class="btm_le_item_price_ot">
									<text class="btm_le_item_price_1">￥</text>
									<text>400</text>
								</view>
							</view> -->
						</view>
						<view class="btm_ri">
							<text class="btm_ri_1">押金：</text>
							<text class="btm_ri_2">¥</text>
							<text class="btm_ri_3">{{ item.deposit | frontPrice }}</text>
							<text class="btm_ri_4">{{ item.deposit | laterPrice }}</text>
						</view>
					</view>
					<view class="car_no flex align-center justify-center" v-if="item.status != 1">
						<view class="car_no_text">车辆占用</view>
					</view>
				</view>
				<view class="loadmore" v-if="list.length > 0">
					<u-loadmore font-size="24" :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
			</view>
			<view class="noData" v-if="list.length == 0 && !isShow">
				<image :src='STATIC_URL+"no.png"'></image>
			</view>
		</template>
		
		
		<benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="storeShow" :label.sync='storeName'
			:value.sync='store_id' :options='storeList' mode='selector' :mask-show='true' :timeout='true'
			:picker-height='100' default-type='id' :default-props='{"label":"name","value":"id"}' @change="storeChange">
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between personalInformation_picker2_0'>
					<view class="personalInformation_picker2_0_c1">车辆归属门店</view>
					<u-icon @tap="$refs.benbenWritePickerCodepicker2.cancel()" name="close" color="#CCCCCC"></u-icon>
				</view>
			</template>
			<template #picker-footer>
				<view class="select_btn flex align-center justify-between">
					<view class="select_btn_1 flex align-center justify-center"
						@tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</view>
					<view class="select_btn_2 flex align-center justify-center"
						@tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</view>
				</view>
			</template>
		</benben-picker>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import utils from "@/common/utils/utils.js"
	export default {
		components: {},

		data() {
			return {
				"loadingImg": "",
				"errorImg": "",
				"imageUrl": "https://speed.zhongchuxing.com/gjdimages/476.png",
				"timeData": "",
				"storeName": "",
				"store_id": "",
				"storeShow": false,
				"storeList": [],
				"isShow": true,
				
				"user_id": "",  // 用户id
				"keyword": "",
				
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				"isShow": true,
				"is_response": false
			};
		},
		computed: {
			
		},
		watch: {},
		onLoad(options) {
			let { user_id } = options;
			if (user_id !== undefined) this.user_id = user_id;
			this.storeName = global.storeName;
			this.store_id = global.userInfo.store_id;
			this.getOneTime();
			this.getStoreList();
		},
		onUnload() {
			uni.$off('changeTime')
		},
		onReady() {

		},
		onShow() {
			uni.$on('changeTime', res => {
				this.timeData = global.timeData;
			})
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {
			// if (this.page >= this.last_page) return;
			if (!this.is_pull) {
				this.status = 'nomore'
				return;
			}
			this.status = 'loading';
			this.page++;
			setTimeout(() => {
				// if (this.page >= this.last_page) this.status = 'nomore';
				// else this.status = 'loading';
				this.is_pull = true;
				this.getCars();
			}, 500)
		},
		onPageScroll(e) {

		},
		methods: {
			// 获取时间戳  oneTime
			getOneTime() {
				this.$api.get(global.apiUrls.oneTime, {
			
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						let timeStamp = res.data.data.time * 1000;
						global.timeStamp = timeStamp;
						let toDay = utils.getNowTime(timeStamp);
						let week = utils.getWeekday(toDay);
						let twoDay = utils.getTwoDaysAfter(timeStamp, 1);
						let twoWeek = utils.getWeekday(twoDay);
						
						if (!global.timeData) { 
							this.timeData = {
								dayNum: 1,
								is_today: toDay == utils.getNowTime() ? 1 : 0,
								toDay: toDay,
								toDay_month: (toDay.substring(5, 10)).replace('-', '月') + '日',
								toDay_time: toDay.substring(11, 16),
								week: week,
								twoDay: twoDay,
								twoDay_month: (twoDay.substring(5, 10)).replace('-', '月') + '日',
								twoDay_time: twoDay.substring(11, 16),
								twoWeek: twoWeek,
								// interval: utils.calculateDifference(toDay, twoDay)
								dayHours: 0
							}
							global.timeData = this.timeData;
						} else {
							this.timeData = global.timeData;
						}
						// console.log(this.timeData);
						this.getCars();
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 获取门店列表  postStore
			getStoreList() {
				this.$api.post(global.apiUrls.postStore, {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.storeList = res.data.data;
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			storeChange() {
				this.is_response = false;
				this.isShow = true;
				this.list = [];
				this.page = 1;
				this.getCars();
			},
			// 获取车辆列表  postCarOrder
			getCars() {
				if (this.is_response) return;
				this.is_response = true;
				this.$api.post(global.apiUrls.postCarOrder, {
					keyword: this.keyword,
					store_id: this.store_id,
					start_time: this.timeData.toDay,
					end_time: this.timeData.twoDay,
					page: this.page,
					rows: 10
				}).then(res => {
					// console.log(res);
					this.is_response = false;
					this.isShow = false;
					if (res.data.code == 1) {
						if (res.data.data.length < 10) {
							this.is_pull = false;
							this.status = 'nomore';
						}
						this.list = this.list.concat(res.data.data);
					} else {
						this.$message.info(res.data.info);
					}
				}).catch(err => {
					this.is_response = false;
				})
			},
			// 选择车辆
			confirmCar(status, store_id, id, real_car_id) {
				if (status != 1) {
					this.$message.info('车辆已被占用，请选择其他车辆');
					return;
				}
				uni.navigateTo({
					url: `/pages/order/confirmOrder?user_id=${this.user_id}&store_id=${store_id}&car_id=${id}&door_to_door=${'1'}&real_car_id=${real_car_id}`
					
				})
			},
			getSearch() {
				this.is_response = false;
				this.isShow = true;
				this.list = [];
				this.page = 1;
				this.getCars();
			},
		}
	};
</script>
<style lang="scss" scoped>
	.car_list {
		padding: 0 24rpx 24rpx;
		.car_item {
			margin-top: 16rpx;
			background: #fff;
			border-radius: 16rpx;
			padding-bottom: 32rpx;
			position: relative;
			.car_top {
				padding-left: 24rpx;
				.top_le {
					width: calc(100% - 222rpx);
					.card_no {
						.card_no_text {
							font-weight: bold;
							font-size: 36rpx;
							color: #222222;
						}
						.car_tag_1 {
							width: 100rpx;
							height: 40rpx;
							background: url(https://speed.zhongchuxing.com/gjdimages/477.png) no-repeat;
							background-size: 100% 100%;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
							margin-left: 10rpx;
						}
						.car_tag_2 {
							width: 72rpx;
							height: 40rpx;
							background: url(https://speed.zhongchuxing.com/gjdimages/478.png) no-repeat;
							background-size: 100% 100%;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
							margin-left: 10rpx;
						}
					}
					.label_list {
						margin-top: 14rpx;
						overflow: hidden;
						.label_item {
							float: left;
							background: #E9EEFF;
							padding: 4rpx 20rpx;
							margin: 0 12rpx 0rpx 0;
							border-radius: 8rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #1A66FA;
						}
						.battery_info {
							float: left;
							background: #E9EEFF;
							padding: 4rpx 12rpx 4rpx 10rpx;
							margin: 0 12rpx 0rpx 0;
							border-radius: 8rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #1A66FA;
							image {
								width: 28rpx;
								height: 24rpx;
								margin-right: 5rpx;
							}
						}
					}
				}
				.top_ri {
					width: 222rpx;
					height: 146rpx;
					.car_img {
						width: 222rpx;
						height: 146rpx;
					}
				}
				/deep/.u-lazy-item {
					width: 222rpx !important;
					height: 146rpx !important;
				}
			}
			.car_no {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
				z-index: 10;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 16rpx;
				
				.car_no_text {
					background-color: #FC5B03;
					font-size: 22rpx;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 10;
					color: #fff;
					padding: 5rpx 15rpx;
					border-radius: 0 16rpx 0 0;
				}
			}
			.car_ce {
				margin: 8rpx 24rpx 0;
				background: #F6F7FB;
				border-radius: 16rpx;
				padding: 20rpx 24rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
			.car_btm {
				margin: 32rpx 24rpx 0;
				.btm_le {
					.btm_le_item {
						border-radius: 16rpx;
						border: 2rpx solid #DFE9FF;
						.btm_le_item_week {
							font-weight: 500;
							font-size: 24rpx;
							color: #1A66FA;
							width: 90rpx;
							height: 56rpx;
							background: #DFE9FF;
							border-radius: 16rpx 0 30rpx 16rpx;
						}
						.btm_le_item_price {
							color: #1A66FA;
							font-weight: bold;
							font-size: 30rpx;
							padding: 0 14rpx;
							
						}
						.btm_le_item_week_ot {
							font-weight: 500;
							font-size: 24rpx;
							color: #FF532E;
							width: 90rpx;
							height: 56rpx;
							background: #FFEBE7;
							border-radius: 16rpx 0 30rpx 16rpx;
						}
						.btm_le_item_price_ot {
							color: #FF532E;
							font-weight: bold;
							font-size: 30rpx;
							padding: 0 14rpx;
						}
						.btm_le_item_price_1 {
							font-size: 24rpx;
						}
					}
				}
				.btm_ri {
					color: #222222;
					.btm_ri_1 {
						font-size: 24rpx;
					}
					.btm_ri_2 {
						font-size: 24rpx;
						font-weight: bold;
					}
					.btm_ri_3 {
						font-size: 30rpx;
						font-weight: bold;
					}
					.btm_ri_4 {
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
	.order_date {
		height: 248rpx;
		margin: 14rpx 24rpx;
		padding: 32rpx 24rpx;
		background: url(https://speed.zhongchuxing.com/gjdimages/475.png) no-repeat;
		background-size: 100% 100%;
		border-radius: 16rpx;
		.store_name {
			width: 488rpx;
			font-weight: bold;
			font-size: 40rpx;
			color: #FFFFFF;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		.store_ch {
			width: 138rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 16rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		
			image {
				width: 28rpx;
				height: 25rpx;
				margin-right: 12rpx;
			}
		}
		.date_item {
			.date_item_1 {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.date_item_2 {
				margin-top: 12rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
		.date_ce {
			text-align: center;
			.date_ce_1 {
				width: 192rpx;
				height: 10rpx;
			}
			.date_ce_2 {
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-top: 22rpx;
			}
		}
	}
	.search_view {
		margin: 16rpx 24rpx 16rpx;
		.search_input {
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
			padding: 0 24rpx 0 78rpx;
			image {
				position: absolute;
				left: 28rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 25rpx;
				height: 25rpx;
			}
			.input {
				font-size: 30rpx;
				flex: 1;
			}
		}
	}
	
	
	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	
	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}
	
	.personalInformation_picker2_0_c1 {
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
	}
	
	.jisuan {
		color: #1A66FA;
		margin-left: 24rpx;
	}
	
	.select_btn {
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
	}
	
	.select_btn_1 {
		width: 236rpx;
		height: 96rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}
	
	.select_btn_2 {
		width: 436rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}
	
	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		height: 100rpx;
	}

	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}

	.personalInformation_picker2_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.personalInformation_picker2_0_c2 {
		color: rgba(44, 143, 255, 1);
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat #f6f7fb;
		background-size: 100% auto !important;
	}
</style>